58小程序云 | 一站式跨平台小程序开发解决方案
引言
目前，小程序风头正劲，微信、百度、阿里、头条等厂商都纷纷推出了自家的小程序。 众多的小程序平台对于各业务而言，又多了很多的流量入口，可以覆盖更多的用户，但也引入了新的问题：开发、维护成本陡增。
要满足业务对多平台部署的需求，这里有三个核心问题需要解决：
如何低成本将现有微信小程序移植到其他小程序平台？
如何架构、设计、开发新的项目以适应新的生态环境？
如何实现将微信小程序·云开发能力过度到其他小程序平台？
为了解决以上痛点，我们启动了58小程序云项目，实现低成本将现有微信小程序迁移到其他小程序的跨平台迁移工具，提供一次编写多端运行的跨平台开发框架，集成跨平台的UI组件库及云开发服务SDK。
跨平台迁移工具（wto-cli）
跨平台迁移可以说是各业务线最强烈的诉求，谁也无法拒绝流量。最简单粗暴的方法是逐个平台重新开发一套代码，事实上也确实有业务线采用这种策略，这么做并非一无是处，优势在于各平台代码互不干扰，易于个性化定制，但缺点也是显而易见的，开发、维护成本极高。还有一种办法是，将现有代码转换成可跨平台编译的框架代码（如：wepy、mpvue、taro等），但这么做有非常高的转换成本，更重要的是还会有因框架本身缺陷引入大量BUG的风险。
基于以上种种原因，我们开发了一款可以近乎零成本将现有微信小程序平滑移植到其他小程序的工具（wto-cli）。
处理过程如下：
上图是wto-cli的主体流程，主要包括：
静态资源拷贝，负责将除了业务代码之外的资源文件复制到目标目录；
代码转换，包括模板的转换、样式的转换以及脚本代码的适配；
规范检查，用于发现并警示存在跨平台兼容的代码并给出对应的解决方案。
对于百度、头条小程序，因其推出时间比较晚，有非常成熟的参考对象（微信小程序），所以需要处理的问题主要集中在命名的差异，特定的约定规则以及部分未支持特性的补齐和适配。
但阿里小程序与微信小程序推出时间比较接近，相对来说可参考性不大，导致在接口定义及架构实现上有着非常大的差异，到阿里小程序的转换，除了要实现到其他小程序转换同等工作之外，还需要解决功能实现的差异。
几种典型的问题：
组件化实现程度差异
阿里小程序的组件化是不彻底的，父组件的样式会影响子组件的样式。这个问题从源代码层面可以规避，父子组件不要使用相同的类名，但这个显然是不友好解决办法。wto-cli的解决方案是：通过postcss对样式文件做模块化处理，对模板则先通过xmldom进行DOMParser，然后遍历DOM节点进行类名的替换，模板与模块化以后的样式文件一一对应则通过页面/组件的路径所计算的hash进行绑定。转换前后对比如下：
（样式文件模块化前后）
（模板文件模块化前后）
接口/属性不一一对应
阿里小程序组件的生命周期函数与微信小程序完全不一样，也没有一一对应的关系。这种情况无法使用简单的方法名正则替换，wto-cli的方案是注入阿里小程序组件的生命周期函数，在这些生命周期函数中在调用微信小程序的生命周期函数，这样以来就避免了方法名替换无法一一对应的问题，也能更方便地书写适配代码。
（代码转换前后对比）
除此之外，wto-cli还解决了像生命周期函数/事件回调函数入参不一致，组件不支持triggerEvent方法等一系列问题。
核心优势：
极低的迁移成本，只需要执行一条命令即可；
对源码无侵入，不会影响之后的迭代升级；
目标代码可读性强，便于调试和问题定位；
便于横向扩展，到各小程序平台的转换互不干扰。
当然，也有些部分的情况（如：平台功能缺失），是wto-cli不能处理的，比如头条暂不支持的selectComponent，只能从源代码层面规避。对于这类工具解决不了的问题，我们除了在文档中有说明之外，也会在转换之前，通过lint警告的方式告知开发者，指明源码存在的兼容问题及对应处理方案。
跨平台编译框架（wbmp）
wto-cli解决了将现有微信小程序跨平台迁移问题。但对于新项目的开发，原生微信小程序开发本身也有不少问题（如：组件化开发程度不高，不支持第三方模块引用，难以转换成H5等）。而跨平台编译框架就非常适合处理这些问题。
目前主流的跨平台编译框架，各自都有其自身的一些不足：
wepy，是腾讯出的一款类vue小程序开发框架，可以编译成微信小程序/H5/百度小程序/阿里小程序，BUG比较多，测试可能不太充分；mpvue，是美团出的类vue的开发框架，可以编译成小程序/H5，因vue本身很灵活，问题也不少，也不太容易收敛；taro，是京东出的类react native开发框架，支持编译成微信小程序/百度小程序/支付宝小程序/H5/react native，工程比较庞大，问题相对也多些，门槛更高。
wbmp是我们选择基于wepy升级改造的跨平台编译框架，可以编译成H5及其他小程序。之所以选择wepy，是因其相对比较轻量级，问题比较收敛，改造成本相对比较小。
H5编译流程
小程序编译流程
wbmp在wepy的基础上的增强包括：支持百度/头条小程序的编译，修复H5及其他小程序的一系列BUG（得益于wto-cli的经验）和代码重构，新增一套高可定制的跨平台UI组件库。
跨平台UI组件（wbui）
微信原生开发的一大痛点在于，组件化程度不高，无法方便地使用第三方组件，不利于技术的沉淀。不管是在PC还是在移动领域，现成的优秀组件/库数不胜数，极大地提高了开发效率。目前，小程序领域还极少存在高质量的可复用组件/库。
鉴于此，我们基于wbmp框架开发了跨平台兼容了UI组件库wbui，可以让业务方快速开发页面。wbui参考主流的UI框架（如ElementUI、WeUI等），提供了非常丰富的色彩、尺寸供选择和搭配。
再完美的UI配方也无法满足所有的业务场景，我们为个性化需求的业务提供了便捷的可定制的机制，可以很方便、优雅地进行业务定制。
模块划分如下：
整体架构如下：
base(sass)，定义公用
mixin方法及通用变量，通过定制通用变量，业务可以很方便实现UI定制/换肤；common(sass)，定义通用css类，如：颜色、背景、边框等，业务可以单独引入通用样式使用；
component(sass)，定义公用组件属性及css类，可单独引入css类文件使用，业务可以定制组件的任何属性；
component(wpy)，实现公用的组件封装，基于component(sass)的css类实现，业务可以单个组件引入使用。
核心优势：
跨平台：所有小程序平台及H5公用一套UI，接近一致的用户体验；
使用灵活：可以单独使用基础样式，也可以单独使用某个组件，有效控制代码体积；
高可定制：基础样式及组件高度抽象，几乎所有的值都通过变量定义，非常方便进行按需定制（配置）；
高可扩展：后续可以实现与设计师解耦协作，设计师只需要把修改后的组件属性定义成特定的结构输出，通过构建工具就可以将更改自动应用到前端项目。
跨平台云开发SDK（mp-scf-sdk）
2018年8月，微信已经提供了云函数服务，极大降低了小微产品的开发成本，提高了版本的迭代快速，但这种便捷无法平滑迁移到其他平台。基于以上痛点，我们开发了跨平台云开发平台（58 FAAS）及小程序端的SDK（mp-scf-sdk）。
mp-scf-sdk提供跨平台的小程序无服务云开发接口，目前主要提供三个核心能力：云函数、云数据库和云文件服务。
云函数服务
云函数即在云端（服务器端，58 FAAS平台）运行的函数，开发者只需要编写逻辑代码，然后上传、部署即可，无需关注服务器底层配置和运行环境。58 FAAS会自动将业务代码部署到服务器中，自动启动业务代码，在应对高并发的请求时，自动扩容，在流量低谷时，自动缩容，实现根据流量弹性伸缩云函数服务。云函数使用示例如下：
// 假设有一个运行的云函数`add`定义如下
exports.main = (event, context) => {
return event.a + event.b + event.c;
};
// 通过mp-scf-sdk调用如下
import cloud from 'mp-scf-sdk';
cloud.callFunction({
name: 'add',
data: {a: 1, b: 2}
}).then(sum => {
console.log(sum); // 3
});云数据库服务
58 FAAS平台提供了一个通用的NoSQL数据库（MongoDB）服务，数据库中的每条记录都是一个JSON格式的对象。一个数据库可以有多个集合，集合可看做一个JSON数组。用户无需关心数据的部署、扩容、监控等问题，只需要使用SDK提供的接口进行调用即可，极大地降低了数据存取、管理的门槛。
mp-scf-sdk提供对NoSQL数据库的调用封装，主要包括三个类：Database、Collection、Document。数据库核心类图如下：
云数据库使用示例如下：
import cloud from 'mp-scf-sdk';
// 获取Database实例
const database = cloud.database({appName: 'demo'});
// 获取Collection示例
const collection = database.collection('user');
// 获取特定记录
collection.doc('nhfbwr2389238923').get().then(data => {
console.log(data);
}, err => {
console.log(err);
});云文件服务
WOS是58 TEG自研的分布式对象存储系统，用于满足海量文件存储和处理的需求。在提供专业、可靠、低成本存储服务的同时，WOS还集成了CDN加速、视频转码、添加水印等服务。58 FAAS平台提供了统一的WOS存储认证服务接口，业务方不需要独立申请WOS权限及相关的密钥，只需要通过mp-scf-sdk封装好的接口进行调用即可。目前，mp-scf-sdk主要提供视频文件的上传接口。云文件使用示例如下：
import cloud from 'mp-scf-sdk';
wx.chooseVideo({
success(res) {
cloud.uploadFile({
filePath: res.tempFilePath
});
}
});总结
58小程序云项目，有效解决了小程序开发过程中遇到的一系列痛点问题。目前wto-cli已经应用于生产环境，已经将58微聊、神奇江湖小程序成功转换成百度、头条、阿里小程序，并在百度、头条上线。wbmp已经实现到H5及各小程序平台的编译，wbui和mp-scf-sdk的加入，使得小程序的开发效率如虎添翼，即将在后续的产品迭代中大放异彩。